<template>
  <div class="engineeringInfo">
    <TitleColumn name="工程信息">
      <a-select class="selectGate" v-model:value="state.selectValue" style="width: 140px">
        <a-select-option value="XYHHZ0001204">祝夏涵闸</a-select-option>
        <a-select-option value="XYHHZ0001205">新禹河闸2</a-select-option>
        <a-select-option value="XYHHZ0001206">新禹河闸3</a-select-option>
      </a-select>
    </TitleColumn>
    <div class="content">
      <ul class="tabs">
        <li
          class="tabsListItem"
          :class="{ active: state.isActive === 1 }"
          @click="handleClickGateItem(1)"
        >
          <span>1#闸门</span>
        </li>
        <li
          class="tabsListItem"
          :class="{ active: state.isActive === 2 }"
          @click="handleClickGateItem(2)"
        >
          <span>2#闸门</span>
        </li>
        <li
          class="tabsListItem"
          :class="{ active: state.isActive === 3 }"
          @click="handleClickGateItem(3)"
        >
          <span>3#闸门</span>
        </li>
      </ul>
      <div class="gateContent">
        <GateInfo />
        <GateSetting :selectValue="state.selectValue"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import TitleColumn from "@/components/TitleColumn";
import GateInfo from "./GateInfo";
import GateSetting from "./GateSetting";

defineOptions({ name: "EngineeringInfo" });

const state = reactive({
  selectValue: "XYHHZ0001204",
  isActive: 1,
});

const handleClickGateItem = (data) => {
  state.isActive = data;
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.engineeringInfo {
  width: calc(100% - 10px);
  ::v-deep(.selectGate) {
    .ant-select-selector {
      background: transparent;
      color: #b4dfff;
      border: 1px solid rgba(6, 183, 253, 0.4);
      font-size: 14px;
      background: #003e7e6b;
      border-radius: 6px;
    }
    .ant-select-arrow {
      color: #b4dfff;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 30px);
    background: #02123433;
    backdrop-filter: blur(10px);
    .tabs {
      width: 100%;
      height: 66px;
      border-bottom: 2px solid #06b7fd7a;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 6px;
      position: relative;
      &::after {
        content: "";
        display: inline-block;
        width: 18px;
        height: 10px;
        background: url(./images/decorate.png) no-repeat;
        background-size: contain;
        position: absolute;
        bottom: -12px;
      }
      .tabsListItem {
        width: 120px;
        height: 40px;
        background: url(./images/button.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        span {
          color: #b4dfff;
          font-size: 14px;
          margin-bottom: 2px;
          display: flex;
          align-items: center;
          &::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            background: url(./images/gateIcon.png) no-repeat;
            background-size: contain;
            margin-right: 6px;
          }
        }
      }
      .active {
        background: url(./images/button_a.png) no-repeat;
        background-size: 100% 100%;
        span {
          color: #fff;
          &::before {
            content: "";
            background: url(./images/gateIcon_a.png) no-repeat;
            background-size: contain;
          }
        }
      }
    }
    .gateContent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: calc(100% - 66px);
      margin-top: 10px;
    }
  }
}
</style>
